<template>
  <div>
    <form action="/">
      <van-search input-align="center" v-model="value" show-action placeholder="请输入小区或地址" @search="onSearch" @cancel="onCancel" />
    </form>
    <div @click="onCommunity(item)" v-for="item in Community" :key="item.community">
      <van-cell :title="item.communityName" />
    </div>
  </div>
</template>

<script>
import { getCityData, getCommunity } from '@/api/article'
export default {
  data () {
    return {
      value: '',
      CityData: {},
      Community: []
    }
  },
  methods: {
    onCancel () {
      this.$router.back()
    },
    async onSearch () {
      const { body } = await getCommunity({ id: this.CityData.value, name: this.value })
      this.Community = body
      console.log(body)
    },
    onCommunity (item) {
      this.$store.commit('community/setcommunity', item)
      this.$router.back()
    }
  },
  computed: {
    name () {
      return localStorage.getItem('current')
    }
  },
  async created () {
    const { body } = await getCityData({ name: this.name })
    this.CityData = body
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-search {
  background-color: RGB(246,245,246);
  .van-cell {
    background-color: #fff;
  }
}

/deep/ .van-cell {
  border-bottom: 1px solid RGB(241,241,241);
}
</style>
